<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./Observer.js"></script>
    <script src="./MyVue.js"></script>
    
    <title>MVVM</title>
    <style>
        html,body,#container{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div id="container">
        {{count.math}}{{username}}
        <div v-html="htmlStr">
        </div>
        <input type="text" v-model="classes" />
        <button v-on:click="handleClick">改名</button>
        <div v-bind:id="myId">66666</div>
        {{allName}}
    </div>
    <script>
       var vm = new Vue({
           el:'#container',
           data:{
               username:'zhangsan',
               htmlStr:'<b>1901优秀高薪</b>',
               classes:'1901',
               myId:'werioijfo',
               count:{
                   math:90
               }
           },
           computed:{
               allName(){
                   return this.username + this.myId
               }
           },
           created(){//实例化之前执行
               console.log('craeted')
           },
           update(){
               console.log('值发生了改变')
           },
           mounted(){//dom挂在之后执行
                console.log('mounted生命周期')
               setTimeout(()=>{
                   this.htmlStr = `<span style="color:red">1901优秀高薪</span>`
                   this.count.math = 85
                   this.myId = 'ppppppp'
               },3000)
           },
           methods:{
               handleChange(e){
                   console.log(e.target.value)
               },
               handleClick(){
                   console.log(this)
                   this.username = 'wangwu'
               }
           }
       })
    </script>
</body>
</html>
